<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>

    <title>Add New User</title>
</head>
<body class="container-fluid">
<div class="col-lg-6 mx-auto">

    <section class="row row-cols-1 mt-lg-5">
        <nav class="nav nav-tabs">
            <a class="nav-item nav-link" th:href="@{/}">Home</a>
            <a class="nav-item nav-link active bg-light" href="#">Add</a>
        </nav>
    </section>

    <section class="row border border-top-0 bg-light">
        <form method="post" class="col-12 p-3" th:action="@{/addApplicant}" th:object="${applicant}">
            <div class="form-group row">
                <label for="input-name" class="col-2 col-form-label">Name</label>
                <div class="col-10">
                    <input type="text" class="form-control" id="input-name" th:field="*{name}">
                </div>
            </div>

            <div class="form-group row">
                <label for="select-profession" class="col-2 col-form-label">Profession</label>
                <div class="col-10">
                    <select class="form-control" id="select-profession">
                        <span th:each="profession : ${professions}">
                            <!-- Generally the Enum to apply the method name return the name
                             of element in UpperCase, we wanna the name in Capital Case.
                             substring(0, 1) return the first character in uppercase, then
                             added the rest of string (skip the first character) in
                             lowercase and replace the character {_} for spaces-->
                            <option th:text="${profession.name().substring(0, 1) +
                            profession.name().substring(1).toLowerCase().replace('_', ' ')}"></option>
                        </span>
                    </select>
                </div>
            </div>

            <div class="form-group row">
                <label for="input-experience" class="col-2 col-form-label">Experience</label>
                <div class="col-10">
                    <input type="number" class="form-control" id="input-experience"
                           placeholder="Experience in years" th:field="*{experienceYears}">
                </div>
            </div>

            <div class="form-group row">
                <label for="input-age" class="col-2 col-form-label">Age</label>
                <div class="col-10">
                    <input type="number" class="form-control" id="input-age" th:field="*{age}">
                </div>
            </div>

            <div class="form-group row">
                <label for="input-telephone" class="col-2 col-form-label">Telephone</label>
                <div class="col-10">
                    <input type="text" class="form-control" id="input-telephone" th:field="*{telephone}">
                </div>
            </div>

            <div class="col-12">
                <button type="submit" class="col-6 offset-3 btn btn-primary btn-block">Add Applicant</button>
            </div>
        </form>
    </section>

</div>
</body>
</html>